<template>
    <div style="background-color: blueviolet;">
        <h1>我是父组件3:插槽</h1>
        <h3>如果我们父组件希望能够在子组件里面插入一张图片，一个按钮等网页元素，需要得
            到子组件的同意，即子组件里面要设立一个插槽</h3>
        <!-- <SonThree>我是存在儿子房间里的私房钱
        <template #box1>
            这是我10月份的私房钱
        </template>
        <template #box2>
            这是我11月份的私房钱
        </template>
    </SonThree> -->
        <SonThree>
        <template #img>
                <img src="../assets/5.jpg" style="width: 200px;height: 300px;"
                alt="">
        </template>
        <template #btn>
            <button>我最喜欢陈火华</button>
        </template>
    </SonThree>

        <SonThree>
        <template #img>
                <img src="../assets/2.jpg" style="width: 200px;height: 300px;"
                alt="">
        </template>
        <template #btn>
            <button>我最喜欢陈火华</button>
        </template>
    </SonThree>
    <SonThree v-for="item in list">
        <template #img>
                <img :src="item.src" style="width: 200px;height: 300px;"
                alt="">
        </template>
        <template #btn>
            <button>{{item.name}}</button>
        </template>
    </SonThree>
    </div>
</template>

<script setup>
import SonThree from '../components/SonThree.vue';
import {ref} from 'vue'
const list = ref(
    [{name:'钟晨瑶',src:'../../src/assets/5.jpg'},
    {name:'钟晨瑶',src:'../../src/assets/2.jpg'},
    {name:'钟晨瑶',src:'../../src/assets/3.png'},
    {name:'钟晨瑶',src:'../../src/assets/4.jpg'}]
)
</script>


<style>



</style>